
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<link href="common.css" rel="stylesheet" type="text/css" media="all">
<title>Record a getUserMedia() Session</title>
</head>
<body>


<script src="jquery.js"></script>
<section>
		<div style="float:left;">
		  <button id="camera-me">1. Turn on camera</button>
		  <h4>Camara</h4>
		  <div><video id="videoID" autoplay style="border: 1px solid black;"></video></div>
		  <button id="record-me" disabled>2. Record<!--⚫--></button>
		  <button id="stop-me" disabled>◼</button>

		</div>
</section>

<script>
(function(exports) {

exports.URL = exports.URL || exports.webkitURL;

exports.requestAnimationFrame = exports.requestAnimationFrame ||
    exports.webkitRequestAnimationFrame || exports.mozRequestAnimationFrame ||
    exports.msRequestAnimationFrame || exports.oRequestAnimationFrame;

exports.cancelAnimationFrame = exports.cancelAnimationFrame ||
    exports.webkitCancelAnimationFrame || exports.mozCancelAnimationFrame ||
    exports.msCancelAnimationFrame || exports.oCancelAnimationFrame;



window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;


var ORIGINAL_DOC_TITLE = document.title;
var video = $('#videoID');
var canvas = document.createElement('canvas'); // offscreen canvas.
var rafId = null;
var startTime = null;
var endTime = null;
var frames = [];

function $(selector) {
  return document.querySelector(selector) || null;
}

function toggleActivateRecordButton() {
  var b = $('#record-me');
  b.textContent = b.disabled ? 'Record' : 'Recording...';
  b.classList.toggle('recording');
  b.disabled = !b.disabled;
}

function turnOnCamera(e) {
  e.target.disabled = true;
  $('#record-me').disabled = false;
  video.controls = false;
  video.width = 320;//video.clientWidth;
  video.height = 240;// video.clientHeight;
  canvas.width = video.width;
  canvas.height = video.height;

  navigator.getUserMedia({video: true},
   function(stream) 
   {
    video.src = window.URL.createObjectURL(stream);
   }, function(e) 
   {   alert('error al arrancar la camara');

  });
};

function record() {
  var ctx = canvas.getContext('2d');
  frames = []; // clear existing frames;
  startTime = Date.now();
  toggleActivateRecordButton();
  $('#stop-me').disabled = false;

  function drawVideoFrame_(time) 
  {
    rafId = requestAnimationFrame(drawVideoFrame_);
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    document.title = 'Recording...' + Math.round((Date.now() - startTime) / 1000) + 's';
    var url = canvas.toDataURL("image/jpeg",1);
    frames.push(url);
  };
  rafId = requestAnimationFrame(drawVideoFrame_);
};

function stop() {
  cancelAnimationFrame(rafId);
  endTime = Date.now();
  $('#stop-me').disabled = true;
  document.title = ORIGINAL_DOC_TITLE;
  toggleActivateRecordButton();
  embedVideoPreview();
};

function embedVideoPreview(opt_url) {
  console.log('frames captured: ' + frames.length + ' => ' + ((endTime - startTime) / 1000) + 's video');
  var data;
  var	maxSalto=3;
  var salto=0;
  frames.forEach(function(dataURL, i) {
	   if(!data)
			data=dataURL;
	   else
	   {   
		   if(salto<maxSalto)
		   {
			   salto++;
		   }   
		   else
		   {
			   salto=0;
			   data=data+dataURL+"*;*";
		   }
	   }

	
   });

   var xmlhttp = new XMLHttpRequest();
   xmlhttp.open("POST", "/centrorelevo/receiver", true);
   xmlhttp.send(data);
}

function initEvents() {
  $('#camera-me').addEventListener('click', turnOnCamera);
  $('#record-me').addEventListener('click', record);
  $('#stop-me').addEventListener('click', stop);
}

initEvents();

exports.$ = $;

})(window);

</script>




</body>
</html>
